<template>
  <div>
    <div class="blogDetail_box">
      <el-page-header @back="goBack" content="主页"> </el-page-header>
      <h2>{{ articleInfo.article.title }}</h2>
      <div class="card_detail">
        <div class="rol">
          <i class="el-icon-time"></i>
          <span>发表于</span>
          <span>{{ articleInfo.article.created }}</span>
        </div>
        <div class="rol" style="border-right: 1.2px solid #ccc">
          <i class="el-icon-view"></i>
          <span>阅读量</span>
          <span>{{ articleInfo.statistic.hits }}</span>
        </div>
        <div class="rol">
          <i class="el-icon-chat-dot-round"></i>
          <span>评论数</span>
          <span>{{ articleInfo.statistic.commentsNum }}</span>
        </div>
      </div>

      <!-- 判断当前登陆是否为该文章的发表人，是才显示编辑接口 -->
      <span v-if="$store.state.user.userInfo !== null">
        <el-link
          icon="el-icon-edit"
          v-show="$store.state.user.userInfo.id === articleInfo.article.userId"
        >
          <router-link
            :to="{
              name: 'BlogEdit',
              params: { blogId: articleInfo.article.id },
            }"
            >编辑</router-link
          >
        </el-link>
      </span>
      <span v-else></span>

      <el-divider></el-divider>
      <!-- github-markdown样式渲染 -->
      <!-- <div class="markdown-body" v-html="articleInfo.content"></div> -->
      <mavon-editor
        class="md"
        :value="articleInfo.article.content"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
        :boxShadow="false"
      >
      </mavon-editor>

      <!-- 属性解释 -->
      <!-- :value="detailContent.content"：引入要转换的内容
                :subfield = "false"：开启单栏模式
                :defaultOpen = "'preview'"：默认展示预览区域
                :toolbarsFlag = "false"：关闭工具栏
                :editable="false"：不允许编辑
                scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)
                :ishljs = "true"：开启代码高亮 -->

      <div class="article_bottom">
        <!-- 上一篇,下一篇区域 -->
        <div class="pre_next">
          <span>
            <el-link> 上一篇：尚未实现 </el-link>
          </span>

          <span>
            <el-link> 下一篇 </el-link>
          </span>
        </div>

        <div class="good_show" v-if="canEdit">
          <el-button
            type="warning"
            icon="el-icon-thumb"
            @click="hitLike(articleInfo.article.id)"
          >
            <span v-if="!isLike">点赞 {{ articleInfo.statistic.likes }}</span>
            <span v-else>已赞 {{ articleInfo.statistic.likes }}</span>
          </el-button>
          <el-button type="danger" @click="toComplainDialog()"
            >文章举报</el-button
          >
          <!-- <div class="button"><el-button type="primary" @click="show = !show">打赏</el-button></div> -->
          <!-- <div :class="show? 'show':'none'">
                      <transition name="el-fade-in-linear">
                        <div v-show="show" class="transition-box">
                          <div class="good_left">
                            <span>评分</span>
                            <el-rate
                                v-model="rateValue">
                            </el-rate>
                            <div class="point">
                              <el-button type="warning" icon="el-icon-thumb">点赞</el-button>
                            </div>
                          </div>
                        </div>
                      </transition>
                      <transition name="el-fade-in">
                        <div v-show="show" class="transition-box">
                          深居简出<br>
                          赏你两巴掌！
                        </div>
                      </transition>
                    </div> -->
        </div>

        <!-- 举报对话框 -->
        <el-dialog
          title="文章举报"
          :visible.sync="complaintDialogVisible"
          width="40%"
          @close="resetComplaintDialog()"
        >
          <el-form
            label-width="80px"
            label-position="top"
            class="complain_form"
            :model="complaintForm"
            :rules="complaintFormRules"
            ref="complaintFormRef"
          >
            <el-form-item label="举报博主" prop="toName">
              <el-row>
                <el-col :span="10"
                  ><el-input disabled v-model="complaintForm.toName"></el-input
                ></el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="选择你举报的内容（必选）" prop="radio">
              <el-radio-group v-model="complaintForm.radio">
                <el-radio-button label="内容涉黄"></el-radio-button>
                <el-radio-button label="政治相关"></el-radio-button>
                <el-radio-button label="内容抄袭"></el-radio-button>
                <el-radio-button label="涉嫌广告"></el-radio-button>
                <el-radio-button label="内容侵权"></el-radio-button>
                <el-radio-button label="侮辱谩骂"></el-radio-button>
                <el-radio-button label="样式问题"></el-radio-button>
                <el-radio-button label="其他"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="补充说明" prop="content">
              <el-input
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                v-model="complaintForm.content"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="complaintDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="complaintArticle()"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <div class="end_tip">
          <div class="copyright">
            <ul>
              <li><strong>本文作者：</strong>{{ articleInfo.author }}</li>
              <li>
                <strong>本文链接：</strong>https://www.yidiandian.top/blog/{{
                  articleInfo.statistic.id
                }}
              </li>
              <li>
                <strong>版权声明：</strong>本博客所有文章除特别声明外，均采用
                BY-NC-SA 许可协议。转载请注明出处！
              </li>
            </ul>
          </div>
          <p>
            -------------本文结束<i class="el-icon-star-on"></i
            >感谢您的阅读-------------
          </p>
          <el-tag effect="plain" type="info"
            ><i class="el-icon-collection-tag"></i>
            {{ articleInfo.article.categories }}</el-tag
          >
        </div>
      </div>
    </div>

    <div class="comment_box">
      <div class="comment_tip" v-if="canEdit">
        <span><i class="el-icon-warning-outline"></i>留言说明： </span>
        <p>务必遵守网络评论文明，如果发现恶语攻击，可是会被封号的哦~</p>
        <el-divider></el-divider>
      </div>
      <div class="comment_tip" v-else>
        <span><i class="el-icon-warning-outline"></i>留言说明： </span>
        <p>登录后才可以评论哦！</p>
      </div>
      <div>
        <div class="comment_form" v-if="canEdit">
          <el-form
            :model="commentForm"
            :rules="commentRules"
            ref="commentRef"
            label-width="50px"
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="昵称">
                  <el-input
                    v-if="$store.state.user.userInfo !== null"
                    disabled
                    v-model="$store.state.user.userInfo.username"
                  ></el-input>
                  <el-input v-else></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <el-input
                    v-if="$store.state.user.userInfo !== null"
                    disabled
                    v-model="$store.state.user.userInfo.email"
                  ></el-input>
                  <el-input v-else></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                rows="8"
                v-model="commentForm.content"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="CommentSubmit">提交</el-button>
              <el-button @click="CommentReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="comment_list">
          <div>
            <p>共 {{ articleInfo.statistic.commentsNum }} 条评论</p>
          </div>
          <div>
            <ul>
              <li v-for="list in commentList" :key="list.comment.id">
                <div class="lileft">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </div>
                <div class="liright">
                  <div class="info">
                    <span class="infoUser">{{ list.comment.author }}</span>
                    <span class="infoTime">{{ list.comment.created }}</span>
                  </div>
                  <p>{{ list.comment.content }}</p>
                </div>
              </li>

              <div class="comment_end_tip">
                <p>没有更多了~</p>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入github-markdown样式渲染md格式的文档
import 'github-markdown-css'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      // 文章id
      articleId: '',
      // 文章详情信息
      articleInfo: {},
      // 评论列表
      commentList: [],
      // 品论查询参数
      queryComment: {
        cur: '',
        size: 1,
        articleId: ''
      },
      CommentTotal: '',
      // 是否展示
      show: false,
      commentForm: {
        content: '' // 评论内容
      },
      commentRules: {
        content: [
          { required: true, message: '小主，看都看了，评论一下呗~', trigger: 'blur' }
        ]
      },
      // 点赞
      isLike: false,
      // 文章评分
      rateValue: '',
      // 投诉表单
      complaintForm: {
        toName: '', // 被投诉人
        radio: '', // 投诉单选内容
        content: '' // 投诉说明
      },
      complaintFormRules: {
        toName: [
          { required: true }
        ],
        radio: [
          { required: true, message: '举报内容必选' }
        ],
        content: [
          { required: true, message: '补充说明不能为空！', trigger: 'blur' }
        ]
      },
      // 举报框
      complaintDialogVisible: false
    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo
      }),
    // 用户是否登录，控制按钮是否可用
    canEdit () {
      let editable = false
      if (this.userInfo && this.userInfo.username !== '') {
        editable = true
      }
      return editable
    }
  },
  methods: {
    // 根据 id 获取文章
    async getArticle (articleId) {
      console.log('获取文章' + articleId)

      // 获取文章详细
      const { data: res } = await this.$http.get(`/article/get/${articleId}`)
      console.log('获取文章详情', res)
      if (res.code !== 200) return this.$message.error('获取文章详情失败！')
      this.articleInfo = res.data

      // 设置标识，为了返回能够回到之前的列表页
      sessionStorage.setItem('pageDetail', true)

      // // 使用一个插件markdown-it，用于解析md文档
      // var MardownIt = require('markdown-it')
      // var md = new MardownIt()
      // this.articleInfo.content = md.render(this.articleInfo.content)
    },
    // 获取文章评论
    async getArtcleComment (articleId) {
      this.queryComment.articleId = articleId
      const { data: res } = await this.$http.get('/comment/commentPage',
        { params: this.queryComment })
      console.log('获取文章评论', res)
      if (res.code !== 200) return this.$message.error('评论获取失败！')
      this.commentList = res.data.list
      this.CommentTotal = res.data.total
    },
    // 获得上一篇下一篇的id和标题名
    getPreNext () {

    },
    // 返回事件
    goBack () {
      this.$router.go(-1)
    },
    // 提交评论
    async CommentSubmit () {
      const { data: res } = await this.$http.post('/comment/insertComment', {
        articleId: this.articleId,
        content: this.commentForm.content
      })
      console.log('提交评论', res)
      if (res.code !== 200) return this.$message.error('评论失败！')
      this.articleInfo.statistic.commentsNum += 1
      this.getArtcleComment(this.articleId)
      this.$refs.commentRef.resetFields()
      return this.$message.success('评论成功！')
    },
    // 重置评论
    CommentReset () {
      this.$refs.commentRef.resetFields()
    },
    // 点赞
    async hitLike (articleId) {
      this.isLike = !this.isLike
      if (this.isLike) {
        const { data: res } = await this.$http.get(`/article/likes/${articleId}?flag=true`)
        console.log('点赞', res)
        if (res.code !== 200) { } else { this.articleInfo.statistic.likes += 1 }
      } else {
        const { data: res } = await this.$http.get(`/article/likes/${articleId}?flag=false`)
        console.log('取消点赞', res)
        if (res.code !== 200) { } else { this.articleInfo.statistic.likes -= 1 }
      }
    },
    // 打开举报 Dialog
    toComplainDialog () {
      this.complaintForm.toName = this.articleInfo.author
      this.complaintDialogVisible = true
    },
    // 重置举报 Dialog 中的 complaintForm 表单
    resetComplaintDialog () {
      this.$refs.complaintFormRef.resetFields()
    },
    // 举报博文
    complaintArticle () {
      // 表单预校验
      this.$refs.complaintFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/complaint/insert', {
            toName: this.complaintForm.toName,
            content: this.complaintForm.radio + '：' + this.complaintForm.content
          })
          console.log('举报文章', res)
          if (res.code !== 200) return
          this.$message.success('已收到你的投诉，管理员会尽快处理！')
          this.complaintDialogVisible = false
        } else {
          // console.log('投诉内容不能为空')
          return this.$message.warning('小主，投诉内容不能为空哦！')
        }
      })
    }
  },
  created () {
    // 可以获取路由路径中的路径参数 blogId
    const blogId = this.$route.params.blogId
    this.articleId = blogId
    this.getArticle(blogId)
    this.getArtcleComment(blogId)
  }
}
</script>

<style lang="less" scoped>
.el-button {
  outline: none;
}
.blogDetail_box {
  min-height: 540px;
  padding: 2% 5%;
  border: 1px solid #eee;
  transition: all 0.5s;
  .el-page-header {
    margin-bottom: 3%;
  }
  .md {
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
  }
  .card_detail {
    height: 40px;
    width: 100%;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    .rol {
      float: left;
      margin-right: 8px;
      i {
        margin-right: 4px;
      }
      span {
        margin-right: 5px;
      }
    }
  }
  .article_bottom {
    .pre_next {
      margin-top: 2%;
      padding: 0 1%;
      display: flex;
      justify-content: space-between;
    }
    .good_show {
      position: relative;
      text-align: center;
      margin-top: 5%;
      .button {
        .el-button {
          outline: none;
        }
      }
      .show {
        display: flex;
        margin-top: 3%;
        justify-content: center;
      }
      .none {
        display: none;
        height: 0;
      }
      .transition-box {
        position: relative;
        width: 50%;
        height: 200px;
        border-radius: 4px;
        background: rgba(160, 233, 100, 0.5);
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2%;
        font-size: 14px;
        .good_right {
          width: 200px;
          // border: 1px solid red;
        }
        .good_left {
          width: 200px;
          // border: 1px solid red;
          span {
            color: sandybrown;
          }
          .point {
            margin-top: 20px;
          }
        }
      }
    }
    .end_tip {
      .copyright {
        ul {
          margin: 2em 0 0;
          padding: 0.5em 1em;
          border-left: 3px solid #ff1700;
          background-color: #f9f9f9;
          list-style: none;
          line-height: 2;
        }
      }
      p {
        text-align: center;
        color: #ccc;
        font-size: 16px;
        padding: 20px 0;
      }
    }
  }
}

.blogDetail_box:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.comment_box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 2%;
  padding: 3% 2%;
  .comment_tip {
    span {
      i {
        margin-right: 3px;
        color: red;
        font-weight: bold;
      }
    }
    p {
      margin-top: 1%;
    }
    .el-divider {
      height: 0.5px;
    }
  }
  .comment_list {
    margin-top: 3%;
    margin-bottom: 4%;
    position: relative;
    ul {
      margin-top: 3%;
      list-style: none;
      padding: 0 !important;
      li {
        min-height: 110px;
        padding: 10px 0;
        margin: 1% 0;
        border-bottom: 1px solid #eee;
        .lileft {
          float: left;
          margin: 0 2%;
        }
        .liright {
          p {
            color: #303133;
          }
          .info {
            margin-bottom: 1%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .infoUser {
              color: #1abc9c;
            }
            .infoTime {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
      .comment_end_tip {
        p {
          text-align: center;
          color: rgb(34, 33, 33);
        }
      }
    }
  }
}
</style>

<style lang="less">
.v-show-content {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
// 修改了投诉表单的label
.complain_form {
  .el-form-item {
    .el-form-item__label {
      line-height: 12px !important;
    }
  }
}
</style>
